<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="robots" content="noindex, nofollow">

    <title>login form layered - Bootsnipp.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="login_config/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <style type="text/css">
        body {
            background: #eee url(img/background.png);
        }

        html, body {
            position: relative;
            height: 100%;
        }

        .login-container {
            position: relative;
            width: 300px;
            margin: 80px auto;
            padding: 20px 40px 40px;
            text-align: center;
            background: #fff;
            border: 1px solid #ccc;
        }

        #output {
            position: absolute;
            width: 300px;
            top: -75px;
            left: 0;
            color: #fff;
        }

        #output.alert-success {
            background: rgb(25, 204, 25);
        }

        #output.alert-danger {
            background: rgb(228, 105, 105);
        }


        .login-container::before, .login-container::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 3.5px;
            left: 0;
            background: #fff;
            z-index: -1;
            -webkit-transform: rotateZ(4deg);
            -moz-transform: rotateZ(4deg);
            -ms-transform: rotateZ(4deg);
            border: 1px solid #ccc;

        }

        .login-container::after {
            top: 5px;
            z-index: -2;
            -webkit-transform: rotateZ(-2deg);
            -moz-transform: rotateZ(-2deg);
            -ms-transform: rotateZ(-2deg);

        }

        .avatar {
            width: 100px;
            height: 100px;
            margin: 10px auto 30px;
            border-radius: 100%;
            border: 2px solid #aaa;
            background-size: cover;
        }

        .form-box input {
            width: 100%;
            padding: 10px;
            text-align: center;
            height: 40px;
            border: 1px solid #ccc;;
            background: #fafafa;
            transition: 0.2s ease-in-out;

        }

        .form-box input:focus {
            outline: 0;
            background: #eee;
        }

        .form-box input[type="text"] {
            border-radius: 5px 5px 0 0;
            text-transform: lowercase;
        }

        .form-box input[type="password"] {
            border-radius: 0 0 5px 5px;
            border-top: 0;
        }

        .form-box button.login {
            margin-top: 15px;
            padding: 10px 20px;
        }

        .animated {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        @-webkit-keyframes fadeInUp {
            0% {
                opacity: 0;
                -webkit-transform: translateY(20px);
                transform: translateY(20px);
            }

            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                -webkit-transform: translateY(20px);
                -ms-transform: translateY(20px);
                transform: translateY(20px);
            }

            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                transform: translateY(0);
            }
        }

        .fadeInUp {
            -webkit-animation-name: fadeInUp;
            animation-name: fadeInUp;
        }
    </style>
    <script src="login_config/jquery-1.11.1.min.js"></script>
    <style type="text/css" abt="234"></style>

    <script src="login_config/bootstrap.min.js"></script>
    <script type="text/javascript">
        window.alert = function () {
        };
        var defaultCSS = document.getElementById('bootstrap-css');

        function changeCSS(css) {
            if (css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="' + css + '" type="text/css" />');
            else $('head > link').filter(':first').replaceWith(defaultCSS);
        }

        $(document).ready(function () {
            var iframe_height = parseInt($('html').height());
            // window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
        });
    </script>
    <script>//remove 17173 video ad
        doAdblock();

        function doAdblock() {
            (function () {
                function A() {
                }

                A.prototype = {
                    rules: {
                        '17173_in': {
                            'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFile(Customer)?\.swf/,
                            'replace': "http://swf.adtchrome.com/17173_in_20150522.swf"
                        },
                        '17173_out': {
                            'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFileFirstpage\.swf/,
                            'replace': "http://swf.adtchrome.com/17173_out_20150522.swf"
                        },
                        '17173_live': {
                            'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream(_firstpage)?\.swf/,
                            'replace': "http://swf.adtchrome.com/17173_stream_20150522.swf"
                        },
                        '17173_live_out': {
                            'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream_(custom)?Out\.swf/,
                            'replace': "http://swf.adtchrome.com/17173.out.Live.swf"
                        }
                    },
                    _done: null,
                    get done() {
                        if (!this._done) {
                            this._done = new Array();
                        }
                        return this._done;
                    },
                    addAnimations: function () {
                        var style = document.createElement('style');
                        style.type = 'text/css';
                        style.innerHTML = 'object,embed{\
                -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;\
                -ms-animation-duration:.001s;-ms-animation-name:playerInserted;\
                -o-animation-duration:.001s;-o-animation-name:playerInserted;\
                animation-duration:.001s;animation-name:playerInserted;}\
                @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}';
                        document.getElementsByTagName('head')[0].appendChild(style);
                    },
                    animationsHandler: function (e) {
                        if (e.animationName === 'playerInserted') {
                            this.replace(e.target);
                        }
                    },
                    replace: function (elem) {
                        if (this.done.indexOf(elem) != -1) return;
                        this.done.push(elem);
                        var player = elem.data || elem.src;
                        if (!player) return;
                        var i, find, replace = false;
                        for (i in this.rules) {
                            find = this.rules[i]['find'];
                            if (find.test(player)) {
                                replace = this.rules[i]['replace'];
                                if ('function' === typeof this.rules[i]['preHandle']) {
                                    this.rules[i]['preHandle'].bind(this, elem, find, replace, player)();
                                } else {
                                    this.reallyReplace.bind(this, elem, find, replace)();
                                }
                                break;
                            }
                        }
                    },
                    reallyReplace: function (elem, find, replace) {
                        elem.data && (elem.data = elem.data.replace(find, replace)) || elem.src && ((elem.src = elem.src.replace(find, replace)) && (elem.style.display = 'block'));
                        var b = elem.querySelector("param[name='movie']");
                        this.reloadPlugin(elem);
                    },
                    reloadPlugin: function (elem) {
                        var nextSibling = elem.nextSibling;
                        var parentNode = elem.parentNode;
                        parentNode.removeChild(elem);
                        var newElem = elem.cloneNode(true);
                        this.done.push(newElem);
                        if (nextSibling) {
                            parentNode.insertBefore(newElem, nextSibling);
                        } else {
                            parentNode.appendChild(newElem);
                        }
                    },
                    init: function () {
                        var handler = this.animationsHandler.bind(this);


                        // document.body.addEventListener('animationstart', handler, false);
                        this.addAnimations();
                    }
                };
                new A().init();
            })();
        }

        //remove baidu search ad
        if (document.URL.indexOf('www.baidu.com') >= 0) {
            if (document && document.getElementsByTagName && document.getElementById && document.body) {
                var aa = function () {
                    var all = document.body.querySelectorAll("#content_left div,#content_left table");
                    for (var i = 0; i < all.length; i++) {
                        if (/display:\s?(table|block)\s!important/.test(all[i].getAttribute("style"))) {
                            all[i].style.display = "none";
                            all[i].style.visibility = 'hidden';
                        }
                    }
                    all = document.body.querySelectorAll('.result.c-container[id="1"]');
                    //if(all.length == 1) return;
                    for (var i = 0; i < all.length; i++) {
                        if (all[i].innerHTML && all[i].innerHTML.indexOf('广告') > -1) {
                            all[i].style.display = "none";
                            all[i].style.visibility = 'hidden';
                        }
                    }
                }
                aa();
                document.getElementById('wrapper_wrapper').addEventListener('DOMSubtreeModified', aa)
            }
        }
        //remove sohu video ad
        if (document.URL.indexOf("tv.sohu.com") >= 0) {
            if (document.cookie.indexOf("fee_status=true") === -1) {
                document.cookie = 'fee_status=true'
            }
        }
        //remove 56.com video ad
        if (document.URL.indexOf("56.com") >= 0) {
            if (document.cookie.indexOf("fee_status=true") === -1) {
                document.cookie = 'fee_status=true'
            }
        }
        //fore iqiyi enable html5 player function
        if (document.URL.indexOf("iqiyi.com") >= 0) {
            if (document.cookie.indexOf("player_forcedType=h5_VOD") === -1) {
                document.cookie = 'player_forcedType=h5_VOD'
                if (localStorage.reloadTime && Date.now() - parseInt(localStorage.reloadTime) < 60000) {
                    console.log('no reload')
                } else {
                    location.reload()
                    localStorage.reloadTime = Date.now();
                }
            }
        }
    </script>
    <style type="text/css">object, embed {
            -webkit-animation-duration: .001s;
            -webkit-animation-name: playerInserted;
            -ms-animation-duration: .001s;
            -ms-animation-name: playerInserted;
            -o-animation-duration: .001s;
            -o-animation-name: playerInserted;
            animation-duration: .001s;
            animation-name: playerInserted;
        }

        @-webkit-keyframes playerInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        @-ms-keyframes playerInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        @-o-keyframes playerInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes playerInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }</style>
</head>
<body>

<script src="js/js.cookie.min.js"></script>
<script src="js/chat.js"></script>


<div class="container">
    <div class="login-container">
        <div id="output"></div>
        <div class="avatar"></div>
        <div class="form-box">
            <input id="name" name="name" type="text" placeholder="username">
            <input id="password" name="password" type="password" placeholder="password">
            <button onclick="login()" class="btn btn-info btn-block login">Login</button>
        </div>
    </div>
</div>


<script type="text/javascript">
    (function () {
        $(".avatar").css(
            "background-image", "url('https://avatars1.githubusercontent.com/u/21306894?s=460&v=4')"
        );
    })();
</script>
</body>
</html>

